<template>
	<div id="register" class="register">
		<div class="registerCont">
			<div class="registerCont_cont">
				<div class="registerCont_cont_cont">
					<div class="regisCon_left">
						<div class="regisCon_div">
							<i class="iconfont icon-denglu"></i>
							<!-- <el-form-item prop="email">
                <el-input placeholder="邮箱号" v-model="form.email"></el-input>
              </el-form-item> -->
							<van-field :value="form.email" placeholder="邮箱号" :border="false" @change="emailChange"
								:error-message="emailError" />
						</div>
						<div class="regisCon_div">
							<i class="iconfont icon-securityCode-b"></i>
							<van-cell-group>
								<van-field :value="form.code" placeholder="验证码" :border="false" @change="codeChange"
									:error-message="codeError" use-button-slot>
									<van-button slot="button" size="small" type="primary" @click="getCode">
										{{ timerCode }}
									</van-button>
								</van-field>
							</van-cell-group>

							<!-- <div>
                <div
                  class="regis_hq"
                  size="small"
                  :class="{ closeClick: time != '获取验证码' }"
                >
                  {{ time }}
                  <span v-show="time != '获取验证码'">秒后重新获取</span>
                </div>
              </div> -->
						</div>

						<div class="regisCon_div">
							<i class="iconfont icon-mima"></i>
							<!-- <el-form-item prop="password">
                <el-input
                  placeholder="请输入密码"
                  type="password"
                  v-model="form.password"
                  v-on:focus="getcodetrue"
                ></el-input>
              </el-form-item> -->
							<van-field :value="form.password" placeholder="请输入密码" :border="false" password
								@change="passwordChange" :error-message="passwordError" />
						</div>
						<div class="regisCon_div">
							<i class="iconfont icon-mima"></i>
							<!-- <el-form-item prop="confirmPassword">
                <el-input
                  placeholder="再次输入密码"
                  type="password"
                  v-model="form.confirmPassword"
                ></el-input>
              </el-form-item> -->
							<van-field :value="form.confirmPassword" placeholder="请再次输入密码" :border="false" password
								@change="confirmPasswordChange" :error-message="confirmPasswordError" />
						</div>
						<div class="regisCon_div" style="width: 230px">
							<!-- <el-form-item prop="codeB">
                <el-input
                  placeholder="请输入图形验证码"
                  @keyup.enter.native="register"
                  v-model="form.codeB"
                ></el-input>
              </el-form-item> -->
							<van-field :value="form.codeB" placeholder="请输入图形验证码" :border="false" @change="codeBChange"
								:error-message="codeBError" />
							<div class="regis_yzm" @click="refreshCode">
								<em>{{ identifyCode }}</em>
								<!-- <el-button>{{identifyCode}}</el-button> -->
								<!-- <s-identify
                  :identifyCode="identifyCode"></s-identify>-->
							</div>
						</div>
						<div class="regisCon_div regisCon_divBC">
							<van-checkbox :value="form.checked" shape="square" @change="onChange">
							</van-checkbox>
							<div class="agreement">
								<span> 我已阅读，理解并接受 </span>
								<a @click="toMenu('/footdetail', { id: 4 })">《用户服务协议》</a>
							</div>
							<!-- <el-checkbox
                v-model="form.checked"
                @change="hangdel"
                @keyup.enter.native="register"
              >
              </el-checkbox> -->
						</div>
						<!-- <div class="regisCon_div" @click="register()" v-on:keyup.enter="register"><a>注册</a></div> -->
						<div class="regisCon_div" @click="register()">
							<a>注册</a>
						</div>
					</div>
				</div>
			</div>
		</div>
		<alerts :flag="flag" @comfig="comfig" title="您已注册该账号，请直接登录"></alerts>
	</div>
</template>

<script>
	import validate from "@/util/validate";
	import alerts from "@/components/zu-ui/alert/index.vue";
	// import router from "@/router/index";
	function isNotEmpty(val) {
		if (typeof val === 'undefined') {
			return true;
		} else if (val === null) {
			return true;
		} else if (typeof val === 'string' && val === '') {
			return true;
		} else if (typeof val === 'number' && isNaN(val)) {
			return true;
		} else if (Array.isArray(val) && val.length === 0) {
			return true;
		} else if (val instanceof Number && isNaN(val)) {
			return true;
		} else if (val.toString() === '[object Object]' && Object.keys(val).length === 0) {
			return true;
		} else {
			return false;
		}
	}
	export default {
		name: "register",
		components: {
			alerts,
		},
		computed: {
			timerCode() {
				return this.time === "获取验证码" ? this.time : this.time + "s";
			},
		},
		data() {
			const VALIDATE_MOBILE_NO = (rule, value, callback) => {
				if (!isNotEmpty(value) || !validate.validateMobile(value)) {
					callback(new Error("手机号需为11位数字"));
				} else {
					callback();
				}
			};
			const VALIDATE_EMAIL = (rule, value, callback) => {
				console.log(validate.validateEmail(value),'看看看到')
				if (!isNotEmpty(value) || !validate.validateEmail(value)) {
					callback(new Error("Email需合法"));
				} else {
					callback();
				}
			};
			const VALIDATE_PASSWORD = (rule, value, callback) => {
				if (!isNotEmpty(value) || !validate.validatePassword(value)) {
					callback(new Error("密码需为6-20位字符"));
				} else {
					callback();
				}
			};
			const VALIDATE_CONFIRM_PASSWORD = (rule, value, callback) => {
				if (!isNotEmpty(this.form.password)) {
					if (this.form.password === this.form.confirmPassword) {
						callback();
					} else {
						callback(new Error("两次密码输入不一致"));
					}
				} else {
					callback();
				}
			};
			return {
				confirmPasswordError: '',
				flag: false,
				// 邀请好友截取id
				ifsendurl: "",
				// 注册码
				registerCode: "",
				time: "获取验证码",
				timer: "",
				qwer: "",
				form: {
					email: "",
					cell: "",
					code: "",
					password: "",
					confirmPassword: "",
					codeB: "",
					checked: false,
				},
				formRules: {
					cell: [{
						validator: VALIDATE_MOBILE_NO,
						trigger: "blur"
					}],
					email: [{
						validator: VALIDATE_EMAIL,
						trigger: "blur"
					}],
					password: [{
							required: true,
							message: "请输入新密码",
							trigger: "blur"
						},
						{
							validator: VALIDATE_PASSWORD,
							trigger: "blur"
						},
					],
					confirmPassword: [{
						validator: VALIDATE_CONFIRM_PASSWORD,
						trigger: "blur"
					}, ],
					code: [{
						required: true,
						message: "请输入验证码",
						trigger: "change",
					}, ],
					codeB: [{
						required: true,
						message: "请输入图形验证码",
						trigger: "change",
					}, ],
					checked: [{
						required: true,
						message: "请勾选协议",
						trigger: "change",
					}, ],
				},
				identifyCodes: "1234567890",
				identifyCode: "",
				emailError: "",
				codeError: "",
				passwordError: "",
				confirmPassword: "",
				codeBError: "",
			};
		},
		methods: {
			comfig(type) {
				if (type) {
					this.flag = false;
					this.$uniRouter.push({
						path: "/login",
					});
				} else {
					this.flag = false;
				}
			},
			onChange(e) {
				console.log(e, "ww ");
				this.form.checked = e.detail;
			},
			codeBChange(e) {
				this.form.codeB = e.detail;
			},
			confirmPasswordChange(e) {
				this.form.confirmPassword = e.detail;
			},
			passwordChange(e) {
				this.form.password = e.detail;
			},
			codeChange(e) {
				this.form.code = e.detail;
			},
			emailChange(e) {
				this.form.email = e.detail;
			},
			// 判断勾选值
			hangdel(val) {
				this.form.checked = val;
			},
			//验证码
			randomNum(min, max) {
				return Math.floor(Math.random() * (max - min) + min);
			},
			refreshCode() {
				this.identifyCode = "";
				this.makeCode(this.identifyCodes, 4);
			},
			makeCode(o, l) {
				for (let i = 0; i < l; i++) {
					this.identifyCode +=
						this.identifyCodes[this.randomNum(0, this.identifyCodes.length)];
				}
			},
			toMenu(url,query) {
				this.$uniRouter.push({
					path: url,
					query:query
				});
			},
			register() {
				this.clearCookie();
				
				// 判断该邮箱是否已注册
				let reg =
					/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
				if (this.form.email == "" || !reg.test(this.form.email)) {
					// this.$message({
					//   message: "请输入邮箱号",
					//   type: "warning",
					// });
					// this.emailError = "请输入有限的邮箱";
					uni.showToast({
						title: "请输入有效的邮箱号",
						icon: "none",
					});
					return;
				} else if (this.form.password == "") {
					this.emailError = "";
					wx.showToast({
						title: "请输入密码",
						icon: "none",
					});
				} else if (this.form.checked == false) {
					wx.showToast({
						title: "请勾选注册协议",
						icon: "none",
					});
				} else if (this.identifyCode !== this.form.codeB) {
					this.form.codeB = "";
					this.refreshCode();
					wx.showToast({
						title: "请输入正确的验证码",
						icon: "none",
					});
					// this.$message({
					//   message: "请输入正确的验证码",
					//   type: "warning",
					// });
				} else if (
					this.form.confirmPassword == "" ||
					this.form.confirmPassword !== this.form.password
				) {
					// this.$message({
					//   message: "请再次输入确认密码",
					//   type: "warning",
					// });
					wx.showToast({
						title: "请再次输入确认密码",
						icon: "none",
					});
				} else if (this.form.code.trim() == "") {
					wx.showToast({
						title: "请输入验证码",
						icon: "none",
					});
				} else {
					this.$httphelper
						.post("/api/LmUserApi/MailboxExist", {
							MailBox: this.form.email,
						})
						.then((res) => {
							if (res.data.data == true) {
								this.flag = true;
							} else {
								// 加密
								this.$httphelper
									.post("/api/LmUserApi/UserRegister", {
										Email: this.form.email,
										Pwd: this.form.password,
										InviteID: this.registerCode,
									})
									.then((res) => {
										if (res.data.msg == "Success") {
											// this.$message({
											//   message: "注册成功",
											//   type: "success",
											// });
											wx.showToast({
												title: "注册成功",
											});
											this.$uniRouter.push({
												path: "/login",
											});
										} else {
											wx.showToast({
												title: "注册失败",
												icon: "none",
											});
											this.refreshCode();
										}
									})
									.catch((err) => {
										console.log(err);
									});
							}
						})
						.catch((err) => {
							console.log(err);
						});
				}
			},
			// 验证码
			gettime() {
				if (this.time == 0) {
					clearInterval(this.close);
					this.time = "获取验证码";
				} else {
					this.time--;
				}
			},
			// 获取验证码
			getCode() {
				if (this.time !== "获取验证码") return;
				let reg =
					/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;

				if (this.form.email == "" || !reg.test(this.form.email)) {
					wx.showToast({
						title: "请输入有效的邮箱号",
						icon: "none",
					});
					return;
				} else {
					this.$httphelper
						.post("/api/LmUserApi/MailboxExist", {
							MailBox: this.form.email,
						})
						.then((res) => {
							console.log(res.data.data);
							if (res.data.data == true) {
								// this.$confirm("您已注册该账号，请直接登录", "提示", {
								//   customClass: "message-logout",
								//   confirmButtonText: "确定",
								//   cancelButtonText: "取消",
								// })
								//   .then(() => {
								//     this.$router.push({
								//       path: "/login",
								//     });
								//   })
								//   .catch((e) => {
								//     console.log(e);
								//   });
								this.flag = true;
							} else {
								this.$httphelper
									.post("/api/SmsEmailCodeApi/EmailCode", {
										MailBox: this.form.email,
									})
									.then((res) => {
										if (res.data.data == true) {
											this.time = 300;
											this.close = setInterval(this.gettime, 1000);
										} else {
											// this.$message({
											//   message: "信息发送失败",
											//   type: "warning",
											// });
											wx.showToast({
												title: "信息发送失败",
												icon: "none",
											});
										}
									})
									.catch((err) => {
										console.log(err);
									});
							}
						})
						.catch((err) => {
							console.log(err);
						});
				}
			},

			// 判断验证码是否输入正确
			getcodetrue() {
				this.$httphelper
					.post("/api/SmsEmailCodeApi/SmsEmailCodeOk", {
						Mobile: this.form.email,
						VcStr: this.form.code,
					})
					.then((res) => {
						if (res.data.data == true) {
							// this.$message({
							//   message: "验证码正确",
							//   type: "success",
							// });
							wx.showToast({
								title: "验证码正确",
							});
						} else if (res.data.data == false) {
							// this.$message({
							//   message: "验证码错误",
							//   type: "warning",
							// });
							wx.showToast({
								title: "验证码错误",
								icon: "none",
							});
						}
					})
					.catch((err) => {
						console.log(err);
					});
			},

			setCookie(c_name, c_pwd, exdays) {
				//   var exdate = new Date(); //获取时间
				//   exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数
				//   //字符串拼接cookie
				//   window.document.cookie =
				//     "c_name" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString();
				//   window.document.cookie =
				//     "c_pwd" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();
			},
			// 获取cookie
			getCookie: function(key) {
				//   if (document.cookie.length > 0) {
				//     var arr = document.cookie.split("; "); //这里显示的格式需要切割一下自己可输出看下
				//     for (var i = 0; i < arr.length; i++) {
				//       var arr2 = arr[i].split("="); //再次切割
				//       //判断查找相对应的值            z   ,2
				//       // if (arr2[0] == "c_name") {
				//       //   this.form.em ail = arr2[1]; //保存到保存数据的地方
				//       // } else if (arr2[0] == "c_pwd") {
				//       //   this.form.password = arr2[1];
				//       // }
				//     }
				//   }
			},
			//清除cookie
			clearCookie: function() {
				//   this.setCookie("", "", -1); //修改2值都为空，天数为负1天就好了
			},
		},
		mounted() {
			this.ifsendurl = location ? location.search : "";
			var theRequest = new Object();
			if (this.ifsendurl.indexOf("?") != -1) {
				var str = this.ifsendurl.substr(1);
				var strs = str.split("&");
				for (var i = 0; i < strs.length; i++) {
					theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
				}
				if (theRequest) {
					this.registerCode = theRequest.p;
					this.$localStorage.setItem("theRequest", theRequest.p);
				} else {
					window.location.href = "http://yyqklm.bosihw.cn/register";
				}
			}

			this.getCookie();
			this.identifyCode = "";
			this.makeCode(this.identifyCodes, 4);
			this.$localStorage.setItem("makeCode", this.identifyCode);
		},

		created() {},
		watch: {
			mobilecode: function(value) {
				if (val) {
					this.attcode = false;
				} else {
					this.attcode = true;
				}
			},
			oneCellshow: function(value) {
				if (val) {
					this.attcodeB = false;
				} else {
					this.attcodeB = true;
				}
			},
		},
	};
</script>

<style lang="less" scoped>
	#register {
		/deep/ .van-cell {
			padding: 8rpx 30rpx !important;
		}

		width: 100%;
		height: 100%;

		.registerTitle {
			width: 100%;
			height: 200rpx;
			margin: 0 auto;
			position: relative;

			.logoCover {
				width: 600rpx;
				height: 250rpx;
				position: absolute;
				top: 0;
				cursor: pointer;
			}

			.returnhome {
				width: 200rpx;
				height: 80rpx;
				background: #0c8ed0;
				text-align: center;
				line-height: 80rpx;
				position: absolute;
				right: -68rpx;
				top: 122rpx;
				cursor: pointer;

				a {
					font-size: 36rpx;
					color: #fff;
				}
			}
		}

		.registerFoot {
			width: 670rpx;
			height: 30rpx;
			margin: 0 auto;
			position: relative;
			margin-top: 58rpx;
		}

		.registerCont {
			width: 100%;
			height: 1240rpx;
			background: #fff;
			position: relative;
			background-size: cover;
			margin-top: 56rpx;

			.registerCont_cont {
				width: 100%;
				height: 100%;
				margin: 0 auto;
				position: relative;

				.registerCont_cont_cont {
					width: 100%;
					height: 100%;
					background: #fff;
					position: absolute;
					top: 140rpx;
					right: 0;
				}
			}

			.regisCon_left {
				width: 738rpx;
				height: 810rpx;
				float: left;
				margin-left: 132rpx;
				margin-top: 90rpx;
				border-right: 1px solid #dfdfdf;

				.regisCon_div {
					height: 74rpx;
					border: 1px solid #cbcbcb;
					margin-bottom: 38rpx;
					border-radius: 10rpx;
					position: relative;

					.regis_hq {
						width: 184rpx;
						height: 80rpx;
						background: #0c8ed0;
						line-height: 70rpx;
						text-align: center;
						color: #fff;
						font-size: 32rpx;
						cursor: pointer;
						position: absolute;
						right: 0;
						top: 0;
						border-radius: 0 10rpx 10rpx 0;
					}

					.regis_yzm {
						background: url("https://uniappfile.bosihw.cn/Res/BosihuiwenRes/yyqklm/images/codebg.png") no-repeat;
						background-size: cover;
						width:184rpx;
						height:74rpx;
						cursor: pointer;
						right: -208rpx;
						top: 0;
						position: absolute;
						line-height: 74rpx;
						text-align: center;
						border: 1px solid #cbcbcb;
						font-size: 36rpx;
						letter-spacing: 12rpx;

						// /deep/.el-button{
						//   width: 92px;
						//   height: 35px;
						// }
						em {
							letter-spacing: 12rpx;
						}
					}

					i {
						color: #cbcbcb;
						font-size:40rpx;
						position: relative;
						top: 6rpx;
						// margin-left: 38rpx;
					}
				}

				.regisCon_div:nth-child(7) {
					line-height: 30rpx;
					text-align: center;
					// height:15px;
					color: #656565;
					font-size: 28rpx;
					border: none;
				}

				.regisCon_divBC {
					display: flex;
					border: none;
					font-style: 24rpx !important;

					span {
						font-style:24rpx !important;
						color: #606266;
					}

					a {
						font-style: 24rpx !important;
						color: #0c8ed0 !important;
					}
				}

				.agreement {
					//   margin-left:5px;
					display: flex;
					font-style:24rpx !important;

					span {
						font-style: 24rpx !important;
					}

					a {
						font-style:24rpx !important;
					}
				}

				.regisCon_divBC a:hover {
					font-weight: bold;
				}

				// .regisCon_div:nth-child(5){
				//   border:none;
				// }
				// .regisCon_div:nth-child(6){
				//   line-height: 15px;
				//   text-align: center;
				//   height:15px;
				//   color:#656565;
				//   font-size:14px;
				//   border:none;
				// }
				.regisCon_div:last-child {
					background: #dfdfdf;
					text-align: center;
					line-height: 74rpx;
					margin-top: 78rpx;
					cursor: pointer;

					a {
						color: #898989;
						font-size: 36rpx;
					}
				}

				.regisCon_div:last-child:hover {
					background: #0c8ed0;

					a {
						color: #fff;
					}
				}
			}

			.regisCon_right {
				width: 476rpx;
				height: 810rpx;
				float: right;
				margin-top: 90rpx;
				margin-right: 136rpx;

				span {
					a {
						color: #0c8ed0;
						font-size: 28rpx;
					}

					i {
						font-size:28rpx;
						font-weight: bold;
						margin-left: 20rpx;
					}
				}

				p {
					margin-bottom: 24rpx;
				}

				p:nth-child(2) {
					margin-top: 32rpx;
					color: #a7060e;
					font-size: 36rpx;
				}

				p:nth-child(3),
				p:nth-child(4),
				p:nth-child(5) {
					color: #000000;
					font-size:28rpx;
				}

				.regisCon_right_img {
					// width: 238px;
					width:204rpx;
					height: 266rpx;
					margin-top: 36rpx;

					div:nth-child(1) {
						margin-left: 140rpx;
					}

					div {
						width: 200rpx;
						float: left;
						margin-right: 38rpx;

						img {
							width: 200rpx;
							height: 200rpx;
						}

						p {
							color: #000000;
							font-size: 28rpx;
							text-align: center;
						}
					}
				}
			}
		}
	}

	.closeClick {
		pointer-events: none;
	}

	/deep/.el-input__inner {
		height: 70rpx !important;
		line-height: 70rpx !important;
		border: none;
	}

	/deep/.el-form-item {
		width: 86%;
		position: absolute;
		left: 92rpx;
		top: 0;
	}

	/deep/.el-form-item__content {
		line-height: 68rpx;
	}

	/deep/.el-input {
		width: 87%;
		outline: none;
		border: none;
	}

	@media screen and (min-width: 1010px) {
		.moLogin {
			display: none;
		}
	}

	@media screen and (max-width: 1010px) {
		.registerTitle {
			display: none;
		}

		/deep/.mosearch {
			display: none !important;
		}

		.regis_yzm {
			right: 0px !important;
		}

		.moLogin {
			position: relative;
			position: absolute;
			right: 0;

			a {
				color: #c0c4cc;
				font-size: 30rpx;

				i {
					margin-left: 10rpx;
				}
			}
		}

		#register .registerCont .regisCon_left .regisCon_div:last-child {
			background: #0c8ed0;

			a {
				color: #fff;
			}
		}

		#mofootBase {
			margin-top: 130rpx;
		}

		.registerFoot {
			display: none;
		}

		.registerCont {
			position: relative;
			background: #fff !important;
			height: 960rpx !important;

			.registerCont_cont {
				width: 100% !important;

				.registerCont_cont_cont {
					width: 83% !important;
					top: 0px !important;
					height: auto !important;
					margin: 0 auto;
					position: relative !important;

					.regisCon_left {
						width: 100% !important;
						float: none !important;
						margin-left: 0 !important;
						border: none !important;

						.el-form {
							width: 100% !important;

							.regisCon_div {
								width: 100% !important;
							}

							.regisCon_div:nth-child(6) {
								width: 366rpx !important;

								.el-form-item {
									width: 100% !important;
									left: 0 !important;
								}
							}
						}
					}

					.regisCon_right {
						display: none;
					}
				}
			}
		}
	}

	.regisCon_div {
		margin-bottom: 40rpx;
		padding: 1px;
	}

	@media screen and (max-width: 1010px) {
		.message-logout {
			width: 80% !important;
		}
	}

	/deep/ .van-cell {
		padding: 14rpx 30rpx !important;
	}
</style>
